/* 
封装自定义hook
需求：布尔逻辑的切换 单独封装成hook

思路：
- 创建一个use开头的函数
- 需要复用的逻辑放到hook中
- 需要用到哪些状态和方法  以对象或者数组形式 return 出去 
- 通过解构拿到hook中的状态和方法

注意：
	hook函数需要在组件内最顶层使用 不能再组件外
	也不能在for if这种条件语句里使用

*/

import {   useState } from "react";

const useShowchange = () => {
	const [show, setShow] = useState(true);
	const changeShow = () => {
		setShow(!show);
	};
	// 需要用到哪些状态和方法  以对象或者数组形式 return 出去 
	return {
		show,
		changeShow,
	};
};

function App() {
	// 需要复用的逻辑放到hook中
	// const [show, setShow] = useState(true);
	// const changeShow = () => {
	// 	setShow(!show)
	// }

	// 接受hook中的变量
	const { show, changeShow } = useShowchange();

	return (
		<div className="app">
			{show && <div>看我出不出来</div>}
			<button onClick={changeShow}> 控制显示和隐藏</button>
		</div>
	);
}

export default App;
